<template>
	<view class="lawList">
		<view class="lawListMain">
			<!-- 文章列表-头部 -->
			<view class="lawListHead">— 文章列表 —</view>
			<!-- 文章列表-主体 -->
			<view class="lawListBody">
				<view
					v-for="(item,index) in data.articleList"
					:key="item.id"
					class="lawArticleItem"
					@tap="gotolawDetails(item.id)"
				>
					<!-- 文章标题 -->
					<view class="lawArticleItemTitle">{{item.title}}</view>
					<!-- 文章主体 -->
					<view class="lawArticleItemMain">
						<!-- 左图 -->
						<view class="lawArticleItemMainImg">
							<image :src="item.img" mode="aspectFit"></image>
						</view>
						<!-- 右文 -->
						<view class="lawArticleItemMainRight">
							<!-- 文章简介 -->
							<view class="lawArticleItemMainRightText">{{item.con}}</view>
							<!-- 作者和日期 -->
							<view class="lawArticleItemMainRightCon">
								<text>作者：{{item.author}}</text>
								<text>{{item.date}}</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 没有更多 -->
				<view class="noMore">没有更多了哟~</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref} from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	
	onLoad((options: { id?: string }) => {
	  console.log('页面加载，参数:', options)
	  // fetchContentData 方法名，可换
	  // fetchContentData('行测')
	})
	
	const data = ref({
		articleList:[
			{
				title:'12348你会用吗？手把手教你免费咨询律师',
				img:'/static/law/pic1.png',
				con:'12348是国家的公共法律服务热线，提供法律咨询、法律援助、普法宣传等服务',
				author:'老张',
				date:'2025-04-22 17:00'
			},
			{
				title:'洞察力：解锁人生与商业的底层逻辑',
				img:'/static/law/pic2.png',
				con:'12348是国家的公共法律服务热线，提供法律咨询、法律援助、普法宣传等服务',
				author:'老李',
				date:'2025-04-22 18:00'
			},
			{
				title:'从一元关系到三元关系：个人与关系的成长之路',
				img:'/static/law/pic3.png',
				con:'12348是国家的公共法律服务热线，提供法律咨询、法律援助、普法宣传等服务',
				author:'老王',
				date:'2025-04-22 19:00'
			},
			{
				title:'12348你会用吗？手把手教你免费咨询律师',
				img:'/static/law/pic1.png',
				con:'12348是国家的公共法律服务热线，提供法律咨询、法律援助、普法宣传等服务',
				author:'老张',
				date:'2025-04-22 17:00'
			},
			{
				title:'洞察力：解锁人生与商业的底层逻辑',
				img:'/static/law/pic2.png',
				con:'12348是国家的公共法律服务热线，提供法律咨询、法律援助、普法宣传等服务',
				author:'老李',
				date:'2025-04-22 18:00'
			},
			{
				title:'从一元关系到三元关系：个人与关系的成长之路',
				img:'/static/law/pic3.png',
				con:'12348是国家的公共法律服务热线，提供法律咨询、法律援助、普法宣传等服务',
				author:'老王',
				date:'2025-04-22 19:00'
			},
		]
	})
	
	// 跳转【文章列表】页
	const gotolawDetails = (id:any) => {
		uni.navigateTo({
			url:'/pages/lawDetails/lawDetails?id='+id
		})
	}
</script>

<style scoped>
.lawListMain {
	width: 100%;
	padding: 0 30rpx 0 30rpx;
	background: #fff;
}

/* 文章列表-头部 */
.lawListHead {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	padding: 50rpx 0 30rpx 0;
	font-weight: bold;
	font-size: 30rpx;
	color: #2c8cfe;
}

/* 文章列表-主体 */
.lawListBody {
	width: 100%;
	padding-top: 40rpx;
}

/* 列表的每一项 */
.lawArticleItem {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding-right: 5rpx;
	margin-bottom: 20rpx;
	border-bottom: 1px dashed #ddd;
	padding-bottom: 20rpx;
}
.lawArticleItem:last-child {
	border-bottom:0
}
/* 文章标题 */
.lawArticleItemTitle {
	margin-bottom: 20rpx;
	font-size: 32rpx;
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.lawArticleItemMain {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* 左侧-文章缩略图 */
.lawArticleItemMainImg {
	width: 24%;
	height: 100%;
	margin-right: 10rpx;
}
.lawArticleItemMainImg image {
	width: 100%;
	height: 130rpx;
}

/* 右侧-内容 */
.lawArticleItemMainRight {
	width: 72%;
	height: 130rpx;
	display: flex;
	flex-direction: column;
	padding-bottom: 8rpx;
}

/* 文章简介 */
.lawArticleItemMainRightText {
	width: 100%;
	color: #9a9a9a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
}

/* 作者 和 日期 */
.lawArticleItemMainRightCon {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
/* 作者样式 */
.lawArticleItemMainRightCon text:nth-child(1) {
	color: rgba(44, 140, 253, 1);
	background: rgba(219, 236, 255, 1);
	padding: 5rpx 20rpx;
	border-radius: 16rpx;
	border: 1px solid rgba(44, 140, 253, 1);
	font-size: 24rpx;
}
/* 日期样式 */
.lawArticleItemMainRightCon text:nth-child(2) {
	font-size: 26rpx;
	color: #aaa;
}

/* 没有更多 */
.noMore {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #ccc;
	padding: 20rpx 0 50rpx 0;
}
</style>